<template>
    <div class="app">
        <myNavbar title="确认收货"></myNavbar>
        <list >
            <cell>
                <div class="confirm_header"></div>
                <div class="confirm_card">
                    <div class="confirm_card_img">
                        <image style="width:154px;height:154px"
                               src="http://rzico.oss-cn-shenzhen.aliyuncs.com/v4.0/wallet-consumption.png"></image>
                    </div>
                    <text class="confirm_card_title">交易成功</text>
                    <text class="confirm_card_subtitle">您已完成交易，感谢您的使用</text>
                    <div class="confirm_card_botton">
                        <div class="confirm_card_botton_left" @click="indexClick">
                            <text class="confirm_card_botton_title">返回首页</text>
                        </div>
                        <div class="confirm_card_botton_right" @click="evaluationClick">
                            <text class="confirm_card_botton_title">立即评价</text>
                        </div>
                    </div>
                </div>
            </cell>
        </list>
    </div>
</template>
<script>
    const storage = weex.requireModule('storage')
    const modal = weex.requireModule('modal')
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'
    export default {
        data() {
            return {}
        },
        created() {

        },
        components:{
            myNavbar
        },
        methods: {
            indexClick() {
                // wx.switchTab({
                //     url: '/pages/index/index',
                // })
                storage.removeItem('order', event => {
                    console.log('delete value:', event.data)
                    console.info('删除')
                })
            },
            evaluationClick() {
                // wx.navigateTo({
                //     url: '/pages/member/order/evaluation',
                // })
            },
        }
    }
</script>
<style scoped>
    .app,body {
        background-color: rgba(248, 248, 248, 0.8);
    }
    .app{
        flex: 1;
    }
    .confirm_header {
        width: 750px;
        height: 960px;
        background-image: linear-gradient(to bottom, red, rgba(248, 248, 248, 0.8));
        position: absolute;
        top: 0;
        z-index: -1;
    }

    .confirm_card {
        width: 700px;
        height: 900px;
        background: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-left: 25px;
        display: flex;
        align-items: center;
        margin-top: 150px;
        flex-direction: column;
        position: relative;
    }

    .confirm_card_img {
        width: 154px;
        height: 154px;
        border-radius: 50%;
        overflow: hidden;
        margin-top: 80px;
    }

    .confirm_card_title {
        display: block;
        font-size: 32px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        margin-top: 40px;
        text-align: center;
    }

    .confirm_card_subtitle {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        opacity: 0.5;
        margin-top: 30px;
        text-align: center;
    }

    .confirm_card_botton {
        position: absolute;
        bottom: 0px;
        padding: 30px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 700px;
        box-sizing: border-box;
    }

    .confirm_card_botton_left {
        width: 286px;
        height: 84px;
        background-image: linear-gradient(to bottom, rgba(196, 198, 204, 1), rgba(213, 215, 219, 1));
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .confirm_card_botton_title {
        font-size: 32px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }

    .confirm_card_botton_right {
        width: 288px;
        height: 84px;
        background-image: linear-gradient(to bottom, rgba(237, 86, 75, 1), rgba(245, 113, 74, 1));
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .navbar {
        width: 750px;
        height: 100px;
    }
    .text {
        font-size: 26px;
    }
</style>
